<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test-3</title>
    <style>
        body {
            margin: 0;
            user-select: none;
        }
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        button {
            background-color: transparent;
            border: 1px solid transparent; 
            cursor: pointer;
        }
        table {
            width: 600px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        table , th ,td {
            border: 1px solid #ccc; 
            text-align: center;
        }
        th ,td {
            height: 40px;
        }
        table button {
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
        }
        table button.active {
            background-color: #ff5500;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th><button data-type="0" class="active">学号</button></th>
                <th><button data-type="1">姓名</button></th>
                <th><button data-type="2">年龄</button></th>
                <th><button data-type="3">性别</button></th>
                <th><button data-type="4">体重</button></th>
                <th><button data-type="5">分数</button></th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </tbody>
    </table>
    <script type="text/javascript">
        // 分值：20分
        // 要求：
            // 把data数据渲染在页面（10分）
            // 根据效果，点击对学生数据进行排序 10分（如图所示）

        var data = [
            {
                "number":1,
                "name":"小A",
                "sex":"男",
                "age":23,
                "score":99,
                "weight":120
            },
            {
                "number":2,
                "name":"小B",
                "sex":"男",
                "age":20,
                "score":90,
                "weight":110
            },
            {
                "number":3,
                "name":"小C",
                "sex":"男",
                "age":26,
                "score":80,
                "weight":150
            },
            {
                "number":4,
                "name":"小D",
                "sex":"女",
                "age":22,
                "score":50,
                "weight":85
            },
            {
                "number":5,
                "name":"小E",
                "sex":"女",
                "age":21,
                "score":65,
                "weight":140
            },
            {
                "number":6,
                "name":"小F",
                "sex":"女",
                "age":18,
                "score":79,
                "weight":100
            }
        ]
    
         
        
        



    </script>
</body>
</html>